<template>
    <div class="log">
        <div class="toolBar">
            <el-input placeholder="输入关键字名回车" v-model="keyword"
                @keydown.enter="pageNum = 1; pageSize = 10; getLogList()"
                @clear="pageNum = 1; pageSize = 10; getLogList()" style="width:300px;" clearable prefix-icon="Search">
            </el-input>
            <el-button @click="removeLog" style="margin-left:10px" type="danger" icon="Delete">删除API权限</el-button>
        </div>
        <el-table header-row-class-name="tableHeader" border stripe highlight-current-row :data="tableData" style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="logDescribe" label="日志描述"/>
            <el-table-column prop="apiPath" label="API路径"/>
            <el-table-column align="center" prop="apiParam" label="请求参数" width="120">
                <template #default="scope">
                    <el-button @click="showParamInfo(scope.row.apiParam)" size="small">查看参数</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="username" label="请求用户"/>
            <el-table-column prop="ipAddress" label="IP地址"/>
            <el-table-column align="center" prop="runTime" label="执行耗时" width="100"/>
            <el-table-column align="center" prop="runStatus" label="状态" width="100">
                <template #default="scope">
                    <el-tag v-if="scope.row.runStatus" type="success">成功</el-tag>
                    <el-tag @click="showErrMsg=true;errMsg=scope.row.errMsg" v-if="!scope.row.runStatus" type="success">异常</el-tag>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="createTime" label="创建时间" width="200"/>
        </el-table>
        <div class="pagination">
            <el-pagination @current-change="goPage" hide-on-single-page small background layout="prev, pager, next" :total="total" />
        </div>
        <el-dialog title="参数信息" v-model="showParam">
            <json-viewer :value="jsonData" style="text-align:left"></json-viewer>
        </el-dialog>
        <el-dialog title="异常信息" v-model="showErrMsg">
            <p>{{errMsg}}</p>
        </el-dialog>
    </div>
</template>
<script>
import {logList, delLog} from '../../js/api'
import { ElMessage } from 'element-plus'
export default {
    data(){
        return{
            tableData: [],
            selectedIds: [],
            keyword: '',
            showParam: false,
            showErrMsg: false,
            jsonData: {},
            errMsg: '',
            pageNum: 1,
            pageSize: 10,
            total: 0,
        }
    },
    methods:{
        getLogList(){
            logList({pageNum:this.pageNum,pageSize:this.pageSize,keyword:this.keyword}).then(res=>{
                this.tableData = res.data.list;
                this.total = res.data.total;
                if(!res.status){
                    ElMessage({type:'error',message:res.msg})
                }
                this.pageNum = 1;
            })
        },
        goPage(currentPageNum){
            this.pageNum = currentPageNum;
            this.getLogList();
        },
        handleSelectionChange(val){
            this.selectedIds = [];
            val.forEach(element => {
                this.selectedIds.push(element.id);
            });
        },
        removeLog(){
            if(this.selectedIds.length==0){
                ElMessage({type:'warning',message:'请先选择要删除的日志'})
                return;
            }
            ElMessageBox.confirm('该操作将删除选中的日志信息，是否继续？','提示',{confirmButtonText:'确定',cancelButtonText:'取消'}).then(()=>{
                delLog(this.selectedIds).then(res=>{
                    ElMessage({type:res.status?'success':'error',message:res.msg})
                    if(res.status) this.getLogList();
                })
            })
        },
        showParamInfo(data){
            this.jsonData = JSON.parse(data);
            this.showParam = true;
        }
    },
    mounted(){
        this.getLogList()
    }
}
</script>
<style scoped>
/* .el-table>>> .tableHeader th{
    background-color: #909399;
    color: white;
    border-color: gray;
} */
</style>